<template>
    <van-popup v-model:show="store.state.videoDetailShow" position="bottom" :style="{ height: '100%', width: '100%' }">
        <div class="popup"></div>
        <div class="top">
            <div class="topLeft">
                <van-icon name="arrow-down" size="0.5rem" @click="closeDetailPopup()" color="#fff" />
            </div>
        </div>
        <div class="content">
            <video width="320" height="240" controls :src="store.state.videoUrl" ref="videoRef"
                disablePictureInPicture="true" controlslist="nodownload noremoteplayback">
            </video>
        </div>
    </van-popup>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import store from '@/store';
let videoRef = ref()
const closeDetailPopup = () => {
    store.commit('updateVideoDetailShow')
}
watch(() => store.state.videoDetailShow, () => {
    if (store.state.videoDetailShow) {
        videoRef?.value?.load()
    } else {
        videoRef?.value?.pause()
    }
})
</script>
 
<style lang = "less" scoped>
.popup {
    position: absolute;
    background-color: black;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.top {
    margin-top: 0.2rem;
    margin-left: 0.2rem;
}

.content {
    display: flex;
    justify-content: center;
}
</style>